<template>
   
   <div>
        <div class="home_compotent">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="item in listData.slice(0,8)" :key="item.id" >
                    <router-link to="/home">
                        <img src="../images/menu2.png" alt="" class="menu_img">
                        <!-- <div v-html="item.img"></div> -->
                        <div class="mui-media-body">{{ item.name }}</div></router-link>
                </li>
            </ul> 
        </div>
        <mt-swipe :auto="4000">
            <mt-swipe-item><img src="../upload/lunbo_01.png" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../upload/lunbo_02.png" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../upload/lunbo_03.png" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../upload/lunbo_04.png" alt=""></mt-swipe-item>
        </mt-swipe>
       <!-- 商品列表 -->
      <div class="cancel_margin">
           <menu-box></menu-box>
      </div>
       <div class="mui-content-padded">
			<button type="button" class="mui-btn mui-btn-success mui-btn-block mui-btn-outlined">更多优惠信息&nbsp;&nbsp;>></button>
		</div>
       <loingstate></loingstate>
   </div>

     

</template>
<style lang="less" scope>

.home_compotent{
    .mui-grid-view.mui-grid-9{
        background-color: #fff;
        >li{
           border: none;
           width: 25%;
        //    height: ;
           
        }
        .menu_img{
            width: 100%;
            width: 100%;
        }
  }
}
.mint-swipe{
    height: 196px;
    width: 100%;
    background-color: #ddd;
     img{
        height: 100%;
        width: 100%;
    }
}
.mui-table-view .mui-media-object{
    line-height: 100px;
    max-width: 100px;
    height: 100px;
   
}

.mui-media-body{
    // font-size: 13px;
    >p{
        margin-top: 30px;
    }
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
    font-size: 13px;
}
.menu_hoader{
    font-size: 20px;
    background-color: darkturquoise;
    padding: 10px 0;
    color: #ddd;
    font-family: "楷体";
}
.cancel_margin{
    margin-top: -50px;
}
</style>
<script>
 import menu_list from "./menu_list/menu_list.vue";
 import loingstate from "./logintai/loginstate.vue";
export default {    
    data() {
        return {
            listData:[]
        }
    },
    created(){
      this.getData();
    },
    methods:{
        getData(){
            this.$http.get("api/getindexmenu").then(function(response){
              this.listData = response.body.result;
            })
        }
    },
    components:{
        "menu-box":menu_list,
        "loingstate":loingstate
    }

}
</script>
